<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ceshi</title>

</head>
<body>
<p>
    <button id="quanxuan">全选</button>
    <button id="fanxuan">反选</button>
    <button id="quxiao">取消</button>  
</p>
<table border="1px solid black">
    <tr>
        <th></th>
        <th>主机名</th>
        <th>ip</th>
        <th>用户名</th>
        <th>密码</th>
    </tr>
    <tr>
        <td><input type="checkbox" name=""></td>
        <td>ceshi1</td>
        <td>1.1.1.1</td>
        <td>test1</td>
        <td>123</td>
    </tr>
    <tr>
        <td><input type="checkbox" name=""></td>
        <td>ceshi2</td>
        <td>1.1.1.2</td>
        <td>test2</td>
        <td>234</td>
    </tr>
    <tr>
        <td><input type="checkbox" name=""></td>
        <td>ceshi3</td>
        <td>1.1.1.3</td>
        <td>test3</td>
        <td>345</td>
    </tr>
</table>
    <script type="text/javascript">
        var ele=document.getElementById('quanxuan');
        ele.onclick=function () {
            var ele=document.getElementsByTagName('input')
            for (var i = 0; i < ele.length; i++) {
                ele[i].checked='checked'
            }
        };
        var ele1=document.getElementById('fanxuan');
        ele1.onclick=function () {
            var ele_1=document.getElementsByTagName('input');
            for (var i = 0; i < ele_1.length; i++) {
                if(ele_1[i].checked){
                    ele_1[i].checked=''
                }else {
                    ele_1[i].checked='checked'
                };
            };
        };
        var ele2=document.getElementById('quxiao');
        ele2.onclick=function () {
            var ele_2=document.getElementsByTagName('input');
            for (var i = 0; i < ele_2.length; i++) {
                ele_2[i].checked=''
            }
        };
    </script>
</body>
</html>
